<template>
    <div class="companyBalance-box">
        <!-- 资金余额 -->
        <div class="companyBalance-list" v-for="item in listData" :key="item.firmName" :class="colorStatus(item)">
            <div class="list-header">
                <h3>{{ item.firmName }}</h3>
                <el-switch :model-value = "item.quotaSwitch" class="ml-2" inline-prompt @input="changContractType(item)"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc" />
            </div>
            <div class="list-main">
                <div class="mian-titie">
                    <div class="content-top">
                        <p>已用额度</p>/<p>总额度</p>
                    </div>
                    <div class="content-bottom">
                        <el-statistic :value="item.currentQuota" class="statistic-left" />
                        <p>/</p>
                        <el-statistic :value="item.totalQuota" class="statistic-right" />
                    </div>
                    <div class="content-progress">
                        <!-- quotaPercentage  进度条 -->
                        <el-progress :color="item.color"
                            :percentage="item.quotaPercentage <= 100 ? item.quotaPercentage : 100" striped
                            :striped-flow="item.quotaSwitch" :duration="50" :show-text="false" />
                        <p>{{ item.quotaPercentage }}%</p>
                    </div>
                </div>
            </div>
            <div class="list-floor">
                <el-button class="floor-left" size="small">
                    资金额度管理
                </el-button>
                <el-button class="floor-right" size="small">
                    额度充值
                </el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const listData = ref([
    {
        firmName: '南阳分公司', // 公司名称
        quotaSwitch: true,      // 额度开关
        currentQuota: 1200,         // 当前的额度
        totalQuota: 12000,           // 总的额度
    },
    {
        firmName: '武汉分公司', // 公司名称
        quotaSwitch: false,      // 额度开关
        currentQuota: 2300,         // 当前的额度
        totalQuota: 12000,           // 总的额度
    },
    {
        firmName: '郑州分公司', // 公司名称
        quotaSwitch: true,      // 额度开关
        currentQuota: 8000,         // 当前的额度
        totalQuota: 12000,           // 总的额度
    },
    {
        firmName: '新媒体信息化公司', // 公司名称
        quotaSwitch: true,      // 额度开关
        currentQuota: 1,         // 当前的额度
        totalQuota: 12000,           // 总的额度
    },
    {
        firmName: '营销策划公司', // 公司名称
        quotaSwitch: true,      // 额度开关
        currentQuota: 84000,         // 当前的额度
        totalQuota: 12000,           // 总的额度
    },
    {
        firmName: '车间加工厂', // 公司名称
        quotaSwitch: true,      // 额度开关
        currentQuota: 11000,         // 当前的额度
        totalQuota: 12000,           // 总的额度
    },
    {
        firmName: '西北公司', // 公司名称
        quotaSwitch: true,      // 额度开关
        currentQuota: 500,         // 当前的额度
        totalQuota: 12000,           // 总的额度
    },
    {
        firmName: '浙闽分公司', // 公司名称
        quotaSwitch: true,      // 额度开关
        currentQuota: 6000,         // 当前的额度
        totalQuota: 12000,           // 总的额度
    },
])


// 样式分配
const colorStatus = (item) => {
    item.quotaPercentage = parseFloat(((item.currentQuota / item.totalQuota) * 100).toFixed(2))
    if (!item.quotaSwitch) {
        // 停用该公司额度
        item.color = "#cccccc"
        return 'switchcolorStatus'
    } else if (item.currentQuota >= item.totalQuota) {
        // 超出额度
        item.color = 'red'
        return 'quotaColorStatusError'
    } else if (item.quotaPercentage >= 80) {
        // 达到预警值
        item.color = '#E6A23C'
        return 'quotaColorStatusWarn'
    } else {
        // 恢复之前的颜色
        item.color = '#409EFF'
    }
}

// 滑块开关
const changContractType = (item) => {
   
    ElMessageBox.alert(`您确定要${item.quotaSwitch ? '停用' : '开启'}${item.firmName}资金额度吗？`, '警告', {
        confirmButtonText: '确认',
        cancelButtonText: 'Cancel',
        type: 'warning',
    }).then(() => {
        item.quotaSwitch = !item.quotaSwitch
        ElMessage({
            type: 'success',
            message: `对${item.firmName}资金额度${!item.quotaSwitch ? '停用' : '开启'}成功！`,
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消操作执行！',
        })
    })
}

</script>
<style scoped lang='scss'>
.companyBalance-box {
    --cb-c-color: #1947FF;
    display: grid;
    grid-template-columns: repeat(3, 30.33%);
    // grid-template-rows: repeat(3, 30.33%);
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    padding: 50px;

    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);

    .switchcolorStatus {
        border-top: 5px solid #ccc !important;
        color: #ccc;

        .el-statistic {
            :deep(.el-statistic__content) {
                color: #ccc !important;
            }
        }
    }

    // 
    .quotaColorStatusWarn {
        border-top: 5px solid #E6A23C !important;

        .statistic-left {
            :deep(.el-statistic__content) {
                color: #ebb463 !important;
            }
        }

        .statistic-right {
            :deep(.el-statistic__content) {
                color: red !important;
            }
        }
    }

    .quotaColorStatusError {
        border-top: 5px solid red !important;

        .statistic-left {
            :deep(.el-statistic__content) {
                color: rgb(221, 35, 35) !important;
                font-size: 18px !important;
            }
        }

        .statistic-right {
            :deep(.el-statistic__content) {
                color: red !important;
            }
        }
    }

    .companyBalance-list {
        border-top: 5px solid green;
        padding: 20px;
        box-shadow: 3px 4px 6px 1px rgba(0, 0, 0, 0.16);
        border-radius: 4px 4px 4px 4px;
        box-sizing: border-box;
        height: 100%;

        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            h3 {
                font-weight: 550;
                font-size: 20px
            }
        }

        .list-main {
            margin: 20px 0 10px 0;

            .mian-titie {
                display: flex;
                flex-direction: column;

                .content-top {
                    display: flex;
                    font-size: 14px;
                    color: #666;
                }

                .content-bottom {
                    display: flex;
                    margin: 10px 0;
                    height: 30px;

                    p {
                        font-size: 16px;
                    }

                    .el-statistic {
                        :deep(.el-statistic__content) {
                            font-size: 16px;
                            font-weight: 550;
                        }
                    }

                    .statistic-left {
                        :deep(.el-statistic__content) {
                            color: green;
                        }
                    }

                    .statistic-right {
                        :deep(.el-statistic__content) {
                            color: red;
                        }
                    }
                }

                .content-progress {
                    display: flex;
                    align-items: center;

                    .el-progress {
                        width: 85%;
                    }

                    p {
                        color: #333;
                        font-size: 14px;
                        margin-left: 1%;
                    }
                }
            }
        }

        .list-floor {
            display: flex;
            margin-bottom: 20px;

            .floor-left {
                color: var(--cb-c-color);
                border: 1px solid var(--cb-c-color);
            }

            .floor-right {
                background-color: var(--cb-c-color);
                color: #fff;
            }
        }
    }
}
</style>
